import { useState, useEffect, useCallback } from "react";
import { message } from "antd";
import { MAX_FILE_SIZE } from '../constant'
import { useNavigate } from "react-router-dom";

function useDrag(uploadContainerRef: React.RefObject<HTMLElement>) {
    const [selectedFile, setSelectedFile] = useState<File | null>(null);
    //存放文件的预览信息 url:预览地址 type：文件类型
    const [filePreView, setFilePreView] = useState<{ url: string, type: string }>()

    useEffect(() => {
        // 尝试从 localStorage 中获取保存的图像数据
        const savedImage = localStorage.getItem('savedImage');
        if (savedImage) {
            // 将 Base64 数据转换为 Blob
            const byteCharacters = atob(savedImage.split(',')[1]); // 以 Base64 解码
            const byteArrays = [];
            for (let offset = 0; offset < byteCharacters.length; offset++) {
                byteArrays.push(byteCharacters.charCodeAt(offset));
            }
            const byteArray = new Uint8Array(byteArrays);
            const blob = new Blob([byteArray], { type: 'image/png' });
            // 创建一个新的 File 对象
            const file = new File([blob], 'image.png', { type: 'image/png' });
            // 设置文件状态
            setSelectedFile(file);
        }
    }, []);  // 在组件加载时执行


    // 为了提高性能，用useCallback缓存函数
    const handleDrag = useCallback((event: DragEvent) => {
        event.preventDefault(); //阻止默认行为
        event.stopPropagation(); //阻止事件传播
    }, []); //不给第二个参数，则没有缓存效果


    const navigate = useNavigate()
    const handleUploadClick = useCallback((event: any) => {
        event.preventDefault(); //阻止默认行为
        event.stopPropagation(); //阻止事件传播 
        navigate('/camera')
    }, [])





    const checkFile = (files: any) => {
        const file = files[0] //当前只考虑托一个文件
        if (!file) {
            message.error('请选择文件')
            return
        }
        //判断文件大小不能超过2G
        if (file.size > MAX_FILE_SIZE) {
            message.error('文件大小不能超过2G')
            return
        }
        //判断文件类型 只能上传图片或视频
        if (!(file.type.startsWith('image/') || file.type.startsWith('video/'))) {
            message.error('只能上传图片或视频')
            return
        }
        setSelectedFile(file)
    }
    const img = localStorage.getItem('savedImage')

    const handleDrop = useCallback((event: DragEvent) => {

        event.preventDefault(); //阻止默认行为
        event.stopPropagation(); //阻止事件传播
        const files = event.dataTransfer?.files; // 获取拖拽的文件
        console.log(files);


        // 选择判断类型
        if (!files && img) {
            checkFile(img)
        } else {
            checkFile(files)
        }
        if (files && files.length > 0) {
            setSelectedFile(files[0]); // 更新文件状态
            message.success("文件上传成功！"); // 可根据需求添加提示
        } else {
            message.error("未选择有效的文件！");
        }
        console.log(files);

    }, []);

    useEffect(() => {
        if (!selectedFile) return
        // URL.createObjectURL 
        // 是一个非常实用的 Web API，
        // 它允许你创建一个指向特定文件对象或 Blob（Binary Large Object）的 URL。
        // 这个 URL 可以用于访问存储在用户本地的文件数据，而无需实际上传文件到服务器。

        const url = URL.createObjectURL(selectedFile)
        setFilePreView({ url: url, type: selectedFile.type })
        //  useEffect 会返回一个销毁函数
        return () => {
            URL.revokeObjectURL(url)
        }

    }, [selectedFile])


    useEffect(() => {
        const uploadContainer = uploadContainerRef.current;  // 获取拖拽容器
        if (uploadContainer) {
            uploadContainer.addEventListener('dragenter', handleDrag); // 添加拖拽进入事件
            uploadContainer.addEventListener('dragover', handleDrag); // 添加拖拽悬停事件
            uploadContainer.addEventListener('drop', handleDrop); // 添加拖拽释放事件
            uploadContainer.addEventListener('dragleave', handleDrag); // 添加拖拽离开事件
            uploadContainer.addEventListener('click', handleUploadClick); // 添加点击事件

            return () => {
                uploadContainer.removeEventListener('dragenter', handleDrag); // 移除拖拽进入事件
                uploadContainer.removeEventListener('dragover', handleDrag); // 移除拖拽悬停事件
                uploadContainer.removeEventListener('drop', handleDrop); // 移除拖拽释放事件
                uploadContainer.removeEventListener('dragleave', handleDrag); // 移除拖拽离开事件
                uploadContainer.removeEventListener('click', handleUploadClick); // 移除点击事件

            };
        }
    }, [uploadContainerRef, handleDrag, handleDrop, handleUploadClick]); // 添加依赖项，确保事件绑定正确

    //清除上传的文件
    const resetFileStatus = () => {
        setSelectedFile(null)
        setFilePreView({ url: '', type: '' })
        localStorage.removeItem('savedImage')
    }


    return { selectedFile, filePreView, resetFileStatus }; // 返回选择的文件和预览函数
}

export default useDrag;
